<template>
  <div class="flip-container" :class="{ 'flip-animate': animate }">
    <div class="flip-wrapper">
      <!-- 恢复为完整数字结构 -->
      <div class="current">{{ current }}</div>
      <div class="next">{{ next }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  props: {
    current: String,
    next: String
  },
  setup(props) {
    const animate = ref(false)
    
    watch(() => props.current, (newVal, oldVal) => {
      if (newVal !== oldVal) {
        animate.value = true
        setTimeout(() => animate.value = false, 600)
      }
    })

    return { animate }
  }
})
</script>

<style lang="scss" scoped>
.flip-container {
    width: 2em;
    height: 2em;      // 固定高度
    margin: 0 .05em;
    .flip-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #409eff;
        color: #fff;
        border-radius: 5px;  // 匹配卡片圆角
        > div {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            backface-visibility: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3); // 增强立体感
            font-family: 'DS-Digital', sans-serif; // 保持与大屏字体一致
            font-weight: 500; // 加粗显示
      }
        .current {
            transform: rotateX(0deg);
            z-index: 2;
        }
        
        .next {
            transform: rotateX(-90deg);
            z-index: 1;
        }
    }
}
</style>
